<template>
    <div id="chatScreen">
        <div>
            <van-nav-bar :title="chatData.name" style="background-color: rgba(255, 255, 255);" left-arrow  @click-left="onClickLeft">
            <template #right>
                <van-button round type="primary" color="#c1ab96" style="height:30px" @click="dj">进店</van-button>
            </template>
            </van-nav-bar>
        </div>
        <div class="chat-body">
            <div class="chat-body-date" >
                {{chatdate}}
            </div>
        </div>
        <div v-for="(item,index) in ChatRecord " :key="index" >
            <div v-if="item.location==0"  class="chat-body-box" >
            <li class="chat-body-left" >
                <img class="chat-HeadPortrait" :src='item.HeadPortrait' alt="">
                <div class="chat-body-left-text" >{{item.content}}</div>
            </li>
            </div>
            <div v-if="item.location==1"   class="chat-body-box" >
                <li class="chat-body-rigth" >
                    <div class="chat-body-rigth-text" >{{item.content}}</div>
                    <img class="chat-HeadPortrait" :src='item.HeadPortrait' alt="">
                </li>
            </div>
        </div>
        <div class="chat-bottom" >
            <input type="text" class="chat-bottom-input" v-model="InChat" >
            <button class="chat-bottom-button"  @click="SendAChat" >发送</button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRouter,useRoute } from "vue-router";
import {onMounted, ref} from 'vue'
const route = useRoute()
const router = useRouter()
onMounted(()=>{
    chatData.value = JSON.parse(route.query.data)  
    if(localStorage.getItem('ChatRecord')){
        ChatRecord.value=JSON.parse(localStorage.getItem('ChatRecord')) 
    }  
})
let chatData:any = ref({})
let onClickLeft = ()=>{
    history.back();
}
let dj = ()=>{
    // router.push('') //预设路径，到店铺
}

//时间
let date =new Date
let chatdate= date.toLocaleString()

//聊天
let ChatRecord:any=ref([])

//增加聊天
let InChat=ref('')
let SendAChat =function(){
    if(InChat.value){
        ChatRecord.value.push({
        'HeadPortrait': "https://api.isoyu.com/uploads/ARU/GIF_S/7010.gif",
        'content': InChat.value,
        'location': 1,
    })
    InChat.value=''
    console.log(ChatRecord.value);
    localStorage.setItem('ChatRecord',JSON.stringify(ChatRecord.value))
    }
}
</script>
<style scoped>
    #chatScreen {
        background-color: rgba(242, 242, 242);
        width:100%;
        height:850px;   
    }
    .chat-body{
        width: 100%;
        min-height: 10px;
        text-align: center;
        margin-top: 1vh;
        margin-bottom: 10px;
        display: inline-block;
        background: #f2f2f2;
        padding: 2vw;
        /* height:850px; */
        box-sizing: border-box;
    }
    *{
        list-style: none;
    }
  .chat-body-box{
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
    }
  .chat-body-left-text{
        text-align: left;
        padding: 2vw;
        background: #fff;
        margin-left: 2vw;
        box-sizing: border-box;

}
  .chat-body-rigth-text{
    text-align: right;
    padding: 2vw;
    background: #fff;
    margin-right: 2vw;
    box-sizing: border-box;

  }
  .chat-bottom-input{
    border: 0;
    width:260px;
    height: 8vw;
    border-radius:4vw ;
    text-indent: 5vw;
  }
  .chat-HeadPortrait{
    width: 10vw;
    height: 10vw;
    border-radius:50% ;
  }
  .chat-body-left{
    display: block;
    margin-left: 5vw;
    margin-top: 2vw;
    float: left;
    display: flex;
    max-width: 60vw;
    word-wrap:break-word;
    word-break:break-all;
    overflow:hidden;
  }
  .chat-body-rigth{
    display: block;
    margin-right: 3vw;
    margin-top: 2vw;
    float: right;
    display: flex;
    max-width: 50vw;
    word-wrap:break-word;
    word-break:break-all;
    overflow:hidden;
  }
    .chat-bottom{
    width: 100vw;
    position: fixed;
    bottom:0vh;
    height: 10vh;
    border-top:1px solid #dedede ;
     background: #f2f2f2;
     box-sizing: border-box;
     padding: 5vw;
     left: 0;
}
.chat-bottom-button{
    border: 0;
    background: #c1ab96;
    color: #ddeaf8;
    margin-left: 2vw;
    font-size: 2vw;
    height: 8vw;
    width: 15vw;
    
    border-radius:4vw ;

}
.van-nav-bar__title {
    font-weight: 700 !important;
}

.van-nav-bar__content {
    width: 100vw;
    height: 6vh !important;
    background: #fff !important;
    border: 0 !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 10 !important;
    box-sizing: border-box;

    border-bottom:1px solid #dedede !important;
}

.van-icon {
    color: #c5a28f !important;
}

.van-nav-bar__text {
    color: #c1ab96 !important;
    font-size: 1vw !important;
}
</style>